<template>
  <div>
    <div class="uk-section">
      <div class="uk-container uk-container-large">
        <!-- eslint-disable vue/no-v-html -->
        <h3 style="text-align: center">{{ article.title }}</h3>

        <div v-for="(item, i) in article.video" style="margin: 10px 0">
          <VueVideo :key="i" :p_videourl="getStrapiMedia(item.url)"></VueVideo>
        </div>
        <div
          v-if="article.content"
          id="editor"
          v-html="$md.render(article.content)"
        />
        <!-- eslint-enable vue/no-v-html -->
        <!--        <p v-if="article.published_at">-->
        <!--          {{ moment(article.published_at).format("MMM Do YY") }}-->
        <!--        </p>-->
      </div>
    </div>
    <Bottom />
  </div>
</template>

<script>
import moment from "moment";
import Bottom from "@/components/Bottom";
import VueVideo from "~/components/VueVideo";
import { getStrapiMedia } from "../../utils/medias";
import { getMetaTags } from "../../utils/seo";

// import DPlayer from "dplayer";
// if (process.browser) {
//   // 在这里根据环境引入wow.js
//   var DPlayer = require("dplayer");
// }
export default {
  components: { Bottom, VueVideo },
  async asyncData({ $strapi, params }) {
    const matchingArticles = await $strapi.find("photos", {
      id: params.id,
    });
    // matchingArticles[0].content.replace(
    //   /uploads(\S*)jpg/g,
    //   function (all, letter) {
    //     console.log(`匹配到了${all}`);
    //     return "好的";
    //   }ya
    // );
    //设置md文档中图片地址准确位置

    let art = matchingArticles[0];
    if (art.content) {
      art.content = art.content.replace(/\(\/(\S*)\)/g, function (all, letter) {
        // console.log(`匹配到了${letter}`);
        return "(" + process.env.jikeid + "/" + letter + ")";
      });
    }
    console.log(art.video[0]);
    return {
      article: art,
      global: await $strapi.find("global"),
    };
  },
  data() {
    return {
      apiUrl: process.env.strapiBaseUri,
    };
  },
  mounted() {},
  methods: {
    checkcontent(content) {
      content.replace(/uploads(\S*)jpg/g, function (all, letter) {
        return "好的";
      });
    },
    moment,
    getStrapiMedia,
  },
  head() {
    const { defaultSeo, favicon, siteName } = this.global;

    // Merge default and article-specific SEO data
    const fullSeo = {
      ...defaultSeo,
      metaTitle: this.article.title,
      metaDescription: "",
      shareImage: this.article.image,
    };

    return {
      titleTemplate: `%s | ${siteName}`,
      title: fullSeo.metaTitle,
      meta: getMetaTags(fullSeo),
      link: [
        {
          rel: "favicon",
          href: getStrapiMedia(favicon.url),
        },
      ],
    };
  },
};
</script>
